<template>
    <div>
        <a-spin :spinning="confirmLoading">
            <j-form-container :disabled="formDisabled">
                <a-form :form="form" slot="detail">
                    <a-row>
                        <a-col :span="8">
                            <a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                                <a-input v-decorator="['userName']" placeholder="请输入姓名"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-item label="职务" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                                <a-input v-decorator="['duty']" placeholder="请输入职务"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-item label="执业情况" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                                <a-input v-decorator="['practiceSituation']" placeholder="执业情况"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-item label="职称" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                                <a-input v-decorator="['professionalTitle']" placeholder="职称"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-item label="执业范围" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                                <a-input v-decorator="['scopeOfPractice']" placeholder="执业范围"></a-input>
                            </a-form-item>
                        </a-col>

                        <a-col :span="12">
                            <a-form-item label="资格证书编码" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                                <a-input v-decorator="['qualificationCode']" placeholder="资格证书编码"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="获取资格证书时间" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                                <a-date-picker showTime format="YYYY-MM-DD" v-decorator="[ 'gettimeQualification', {}]" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="执业证书编号" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                                <a-input v-decorator="['practisingCode']" placeholder="执业证书编号"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="获取执业证书时间" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                                <a-date-picker showTime format="YYYY-MM-DD" v-decorator="[ 'gettimePractising', {}]" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="资格证书" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                                <j-image-upload :isMultiple="true" v-decorator="['qualificationCertificate']" placeholder="资格证书"></j-image-upload>
                                <a-button @click="handleAddQual" type="primary" icon="plus">拍照上传图片</a-button>
                            </a-form-item>
                        </a-col>

                        <a-col :span="12">
                            <a-form-item label="执业证书" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                                <j-image-upload :isMultiple="true" v-decorator="['practisingCertificate']" placeholder="执业证书"></j-image-upload>
                            </a-form-item>
                        </a-col>
                        <a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">
                            <a-button @click="submitForm">提 交</a-button>
                        </a-col>
                    </a-row>
                </a-form>
                <web-cam ref="webCamRef"/>
            </j-form-container>
        </a-spin>

    </div>
</template>


<script>
import { getAction, httpAction,getFileAccessHttpUrl } from '@/api/manage'
import pick from 'lodash.pick'
import SelectAddress from '@/components/Jane/SelectAddress'
import { GET_USER_AUTH } from '@/utils/util'
import JImageUpload from '@/components/jeecg/JImageUpload'
import WebCam from '@/components/yang/webCam'

export default {
    name: 'CustomerMedicalInfoForm',
    components: {
        WebCam,
        SelectAddress,
        JImageUpload,
    },
    props: {
        //流程表单data
        formData: {
            type: Object,
            default: () => {
            },
            required: false
        },
        //表单模式：true流程表单 false普通表单
        formBpm: {
            type: Boolean,
            default: false,
            required: false
        },
        //表单禁用
        disabled: {
            type: Boolean,
            default: false,
            required: false
        },
        customerNumber:{
            type: String,
            default: false,
            required: false
        }


    },
    data() {
        return {
            form: this.$form.createForm(this),
            model: {},
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 }
            },
            confirmLoading: false,
            validatorRules: {},
            url: {
                add: '/hc/hcMedicalCare/add',
                edit: '/hc/hcMedicalCare/edit',
                // queryById: '/hc/hcRecycleCustomerInfo/queryById'
            },
            // 上传资格证书
            showQuali: false,
            QualiList:[],
            // 上传执业证书

        }
    },
    inject:['getData'],
    computed: {
        formDisabled() {
            if (this.formBpm === true) {
                if (this.formData.disabled === false) {
                    return false
                }
                return true
            }
            return this.disabled
        },
        showFlowSubmitButton() {
            if (this.formBpm === true) {
                if (this.formData.disabled === false) {
                    return true
                }
            }
            return false
        },
        showSetting(){
            if(GET_USER_AUTH(SETTING_CUSTOMER)){
                return true;
            }
            return false;
        }
    },
    created() {
        //如果是流程中表单，则需要加载流程表单data
        // this.showFlowData()
        // console.log('customerNumber==>',this.customerNumber)

    },
    mounted() {
    },
    methods: {
        // 使用高拍仪拍照上传资格证书
        handleAddQual(){
            let ref = this.$refs.webCamRef
            if (ref) {
                ref.showWebCam()
            }
        },
        /* 图片预览 */
        getImgView(text) {
            if (text && text.indexOf(',') > 0) {
                text = text.substring(0, text.indexOf(','))
            }
            return getFileAccessHttpUrl(text)
        },
        add() {
            this.edit({})
        },
        edit(record) {
            this.showMap = false
            this.form.resetFields()
            this.model = Object.assign({}, record)
            this.visible = true
            this.$nextTick(() => {
                this.form.setFieldsValue(pick(this.model, 'userName', 'duty', 'practiceSituation', 'professionalTitle',
                    'scopeOfPractice', 'qualificationCertificate', 'qualificationCode', 'gettimeQualification', 'practisingCertificate', 'linkBluetooth',
                    'practisingCode', 'gettimePractising'))
            })
        },
        //渲染流程表单数据
        // showFlowData() {
        //     if (this.formBpm === true) {
        //         let params = { id: this.formData.dataId }
        //         getAction(this.url.queryById, params).then((res) => {
        //             if (res.success) {
        //                 this.edit(res.result)
        //             }
        //         })
        //     }
        // },

        submitForm() {
            const that = this
            // 触发表单验证
            this.form.validateFields((err, values) => {
                if (!err) {
                    that.confirmLoading = true
                    let httpurl = ''
                    let method = ''
                    if (!this.model.id) {
                        httpurl += this.url.add
                        method = 'post'
                        this.model.customerNumber = this.customerNumber
                    } else {
                        httpurl += this.url.edit
                        method = 'put'
                    }

                    let formData = Object.assign(this.model, values)

                    httpAction(httpurl, formData, method).then((res) => {
                        if (res.success) {
                            that.$message.success(res.message)

                            that.$emit('ok')
                            that.getData()

                        } else {
                            that.$message.warning(res.message)
                        }
                    }).finally(() => {
                        that.confirmLoading = false
                    })
                }

            })
        },


    },
}
</script>
<style scoped>

#map-box .page-store-map ul {
    margin-top: 10px;
    padding-bottom: 10px;
    flex: 1;
    overflow:auto;/*当内容超过，出现滚动条*/
    overflow-y: auto;
    margin-left: 80px;
    width: 450px;
    height: 300px;
    border: 1px #ffffff solid;
}

#map-box .page-store-map ul li {
    margin-bottom: 10px;
    padding-left: 30px;
    padding-right: 10px;
    position: relative;
    list-style-type: none;
}

#map-box .page-store-map ul li h3 {
    line-height: 20px;
    color: #333;
    font-size: 14px;
}

#map-box .page-store-map ul li p {
    line-height: 15px;
    color: #999;
    font-size: 12px;
}

#map-box .page-store-map ul li:last-child {
    margin-bottom: 0;
}

#map-box .page-store-map ul li:after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border: 1px solid #ccc;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 10px;
}

#map-box .page-store-map ul li.active:after {
    top: 10px;
    border-radius: 0;
    width: 13px;
    height: 15px;
    border: 0 none;
    background: url() no-repeat;
    background-size: contain;
}

#map-box .page-store-map .submit-box {
    height: 60px;
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    align-items: center;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
}

#map-box .page-store-map .submit-box div {
    margin: 10px;
    box-sizing: border-box;
    font-size: 15px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 15px;
}

#map-box .page-store-map .submit-box .fanhui {
    flex: 1;
    border: 1px solid #DEDEDE;
    color: #333;
}

#map-box .page-store-map .submit-box .queding {
    flex: 2;
    background-color: #2DC927;
    color: #fff;
    font-weight: bold;
}

.icon-map {
    display: inline-block;
    vertical-align: middle;
    width: 15px;
    height: 21px;
    background: url() no-repeat;
    background-size: contain;
}
</style>
